<template>
    <div class="photoinfo-container">
        <h3>{{ photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{ photoinfo.add_time | dateFormat}}</span>
            <span>点击：{{ photoinfo.click }}次</span>
        </p>

        <hr>

        <!-- 缩略图区域 -->
        <vue-preview :slides="thumbs" @close="handleClose"></vue-preview>

        <!-- 缩略图介绍区域 -->
        <div class="content" v-html="photoinfo.content">
        </div>

        <!-- 评论子组件 comment组件复用 -->
        <comment-box :id="id"></comment-box>
    </div>
</template>

<script>
    import comment from "../subcomponents/comment.vue"

    export default{
        data(){
            return{
                id:this.$route.params.id,//从路由中获取到的图片id
                photoinfo:{},//存放图片的详细信息
                thumbs:[]//缩略图的数组

            }
        },
        created(){
            this.getImgInfo()
            this.getThumbs()
        },
        methods:{
            getImgInfo(id){//获取图片的详细信息
                this.axios
                .get('api/getimageInfo/' + this.id)
                .then(result=>{
                    if(result.data.status===0){
                        this.photoinfo = result.data.message[0];
                    }
                })
            },
            getThumbs(){
                this.axios
                .get('api/getthumimages/' + this.id)
                .then(result=>{
                    if(result.data.status===0){
                        //循环每个图片数据，补全图片的宽和高
                        result.data.message.forEach(item=>{
                            item.w=600;
                            item.h=400;
                            item.msrc= item.src;
                        });
                        this.thumbs = result.data.message;
                        // console.log(this.thumbs);
                    }
                })
            },
            handleClose () {
                console.log('close event')
            }
        },
        components:{
            "comment-box":comment
        }
    }
</script>

<style lang="scss" scoped>
.photoinfo-container{
    padding:3px;
    h3{
        color:#26a2ff;
        font-size:16px;
        text-align:center;
        margin:15px 0;
        line-height:1.5;
    }
    .subtitle{
        display:flex;
        justify-content:space-between;
        font-size:12px;
    }
    .content{
        font-size:12px;
        line-height:2;
    }
}
</style>